<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景颜色变化</title>
    <style type="text/css">
        .red{
            font-size: 28px;
            color: red;
        }
    </style>
</head>
<body>
<input type="button" value="点我吧">
<div type="button" id="i">点我吧</div>
<p>我一会显示一会隐藏</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    // toggle()  
    //  toggle(fn1,fn2,fn3) 带参数---模拟鼠标连续点击事件,会循环执行
    $("input").toggle(
        function(){$("body").css("background-color","red")},
        function(){$("body").css("background-color","green")},
        function(){$("body").css("background-color","blue")},

    )
    //  不带参数  ----- show hide
    $("#i").click(function(){
        // $("p").toggle()  ///元素的显示隐藏
        $("p").toggleClass("red")   ///切换相关的css样式
    })

</script>

</body>
</html>